<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'/>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'/>
    <title>Simple Todo</title>
    <link href='/static/css/login.css' rel='stylesheet'/>
    <link href='/static/img/abc.ico' rel='shotcut icon'/>
    <script src = '/static/js/jquery.js' ></script>
    <script type='text/javascript'>
        function submit_login() {
            var name_value = document.getElementById('usename').value;
            var pwd_value = document.getElementById('password').value;

            $.ajax({
                url: '/todos/login/',
                type: 'POST',
                data: {usename: name_value, password:pwd_value},
                success: function(data) {
                    window.location.href = 'https://todolist-smallcpp.rhcloud.com/todos/';
                },
                error: function(jqXHR) {
                    if (jqXHR.status == 403) {
                        alert('账号/密码错误...')
                    } else {
                        alert('未知错误...')
                    }
                }
            });
        }
    </script>
</head>
<body>
    <header>
        <div class='text'></div>
    </header>
    <div id='content'>
        <img src='/static/img/jian.png' />
        <h1>Simple Todo</h1>
        <input id='usename' type='text' value='用户名' style='background: url("/static/img/usename.png") no-repeat; border: 0;'/>
        <br/>
        <input id='password' type='password' value='........' style='background: url("/static/img/password.png") no-repeat; border: 0;'/>
        <div class='bt clear'>
            <input class='check fl' type='checkbox' value=''/>
            <span class='fl'>记住密码</span> <em class='fl'>忘记密码？</em>
            <input id='submit_login' value='登录' type='button' onclick='submit_login()'/>
        </div>
    </div>
</body>
</html>
